<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百分比加载</title>
</head>
<body>
 	
 	<canvas id="myCanvas" width="600" height="600" style="background: #000000;"></canvas>
 	
  <script>
     window.onload = function(){
       
        
         var canvas = document.getElementById('myCanvas');
              
          var context = canvas.getContext('2d');
          var    centerX = canvas.width/2;
           var   centerY = canvas.height/2;  
           var   rad = Math.PI*2/100;
            var  speed = 0.1;
        
        // 画外面的红色圆圈
        function ww(n){
        	
	
			
			 context.save();
            context.strokeStyle = "#49f"; //设置描边样式
            context.lineWidth = 5; //设置线宽
            context.beginPath(); //路径开始
            context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
            context.stroke(); //绘制
            context.closePath(); //路径结束
            context.restore();
			
        }
        
        // 画最外面的蓝色圆圈
        function hh(){
        	
        	
        	 context.save();
             context.beginPath();
             context.strokeStyle = "white";
             context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
             context.stroke();
             context.closePath();
             context.restore();
        }
        
        function test(n){
        	context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
            context.strokeStyle = "#49f"; //设置描边样式
            context.font = "40px Arial"; //设置字体大小和字体
            //绘制字体，并且指定位置
            context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
            context.stroke(); //执行绘制
            context.restore();
        	
        	
        	
        	
        }
        
       
        
         //动画循环
         (function drawFrame(){
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
         
            hh();
            test(speed);
        	ww(speed);
        	
            
            if(speed > 100) speed = 0;
            speed += 0.1;
        }());
        
        
        
     }
 </script>
</body>
</html>